<template>
  <div class="header_box">
    <div>活动名称：{{ baseInfo.title }}</div>
    <div>创建人：{{ baseInfo.created_name }}</div>
    <div>创建时间：{{ baseInfo.created_at }}</div>
    <div v-if="baseInfo.period_type == 1">创建有效期：永久</div>
    <div v-else>创建有效期：{{ baseInfo.effective_time[0] }} 至 {{ baseInfo.effective_time[1] }}</div>
    <div>状态： <span :style="{ color: StatusColor(baseInfo.activity_status_name) }">{{ baseInfo.activity_status_name }}</span></div>
    <div>提前结束时间：{{ baseInfo.activity_end_time || '' }}</div>
    <div>包含门店数: {{ baseInfo.store_num }}</div>
  </div>
  <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />
  <Quantity ref="QuantityRef" />
  <Statistics ref="StatisticsRef" />
</template>

<script setup lang="ts">
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import { statsBase, storeStats } from '@/api/smartMarketing/storeCustomers'
  import { useRoute } from 'vue-router'
  import { getDay, DFormat } from '@/utils/utils'
  import { StatusColor } from '@/utils/smartMarketing'
  import Quantity from './components/Quantity.vue'
  import Statistics from './components/Statistics.vue'
  import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'

  const QuantityRef: any = ref(null)
  const StatisticsRef: any = ref(null)
  const route = useRoute()
  // 基础信息
  const baseInfo = ref({
    title: '',
    created_name: '',
    created_at: '',
    effective_time: ['', ''],
    period_type: 1,
    activity_status_name: '',
    activity_end_time: '',
    store_num: 0
  })
  const defaultParams = ref({
    created_at: [] //创建时间
  })

  const statisOptions = reactive([
    {
      label: '时间筛选',
      type: 'dateFilter',
    },
  ])
  
  const onSubmit = (data:any) => {
    defaultParams.value.created_at = data.times || []
    nextTick(() => {
      if(data.times) {
        getData()
      } 
    })
  }

  // 获取统计基础信息
  const statsBaseFun = async () => {
    const res = await statsBase({ activity_id: route.query.id })
    console.log(res, '统计基础信息')
    baseInfo.value = res
  }
  statsBaseFun()
  const getData = async (v?: any) => {
    if (v && v.created_at) defaultParams.value = { ...v }
    const params = {
      activity_id: route.query.id,
      ...defaultParams.value
    }
    console.log(params.created_at, '查询数据')
    const res = await storeStats(params)
    console.log(res, '统计数据')
    QuantityRef.value.getState(res)
    let chartData = {
      stats_list: {
        date: [],
        total_num: [], // 总数
        total_cust: [] // 流失总数
      },
      store_list: {
        date: [],
        total_num: [],
        total_cust: []
      }
    }
    // 客户
    res.stats_list?.forEach((item) => {
      chartData.stats_list.date.push(item.name)
      chartData.stats_list.total_num.push(item.total_num)
      chartData.stats_list.total_cust.push(item.total_cust)
    })
    // 门店
    res.store_list?.forEach((item) => {
      chartData.store_list.date.push(item.name)
      chartData.store_list.total_num.push(item.total_num)
      chartData.store_list.total_cust.push(item.total_cust)
    })
    StatisticsRef.value.getEchartData(chartData)
    QuantityRef.value.getState(res)
  }
  onMounted(() => {
    // getData({})
  })
</script>
<style lang="scss" scoped>
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 20px 26px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;
  }
  .search_box {
    margin-bottom: 14px;
  }
</style>
